<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{
			margin: auto;
			width: 600px;	
		}
	</style>
	<body>
		<div>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
		</div>	
		<div id="result" style="color: red; font-size: 30px;">
			<p id="count">击中小球加1分，没有击中减一分</p>
			<button onclick="restore()">重新开始</button>
		</div>
		
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var raf;
		var count = 0;
		var beginGame = false;
		var result = document.getElementById("count");
		var ball = {
			x: 100,
			y: 100,
			xx: 2,
			yy: 3,
			r: 60,
			color: "red",

			draw: function() {
				context.save();
				context.beginPath();
				context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
				context.fillStyle = this.color;
				context.closePath();
				context.fill();
				context.restore();
			},
			hit: function(hx,hy){
				context.beginPath();
				context.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
				context.closePath();
				//
				return context.isPointInPath(hx,hy);
			}
		}
		function restore(){
			raf = window.requestAnimationFrame(draw);
			result.innerHTML = "击中小球加1分，没有击中减一分";
		}
		function draw() {
//			context.translate(100,100);
			//清除

			//			context.clearRect(0,0,canvas.width,canvas.height);
			context.fillStyle = "rgba(255,255,255,0.3)";
			context.fillRect(0, 0, canvas.width, canvas.height);
			//绘制
			ball.draw();
			//移动
			ball.x += ball.xx;
			ball.y += ball.yy;

			if(ball.x + ball.xx > canvas.width || ball.x + ball.xx < 0) {
				ball.xx = -ball.xx;
			}
			if(ball.y + ball.yy > canvas.height || ball.y + ball.yy < 0) {
				ball.yy = -ball.yy;
			}
			//再次绘制
			raf = window.requestAnimationFrame(draw);
		};
		canvas.addEventListener("click",function(){
			var x = event.clientX - this.offsetLeft;
			var y = event.clientY - this.offsetTop;
			var bHit = ball.hit(x,y);
			if (true == bHit){
				if (true == beginGame){
					count++;
					result.innerHTML = "你的成绩是" + count;
				}
			}else{
				if(true == beginGame){
					count--;
					result.innerHTML = "你的成绩是" + count;
				}
			}
		})
//		canvas.addEventListener("click",function(){
//			if(context.isPointInPath(event.clientX - this.offsetLeft,event.clientY)){
//				alert("点击到了");
//			}else{
//				alert("没点击到");
//			}
//		})
//		canvas.addEventListener("mousemove",function getMousePos(event){
//			var x = event.clientX - this.offsetLeft;
//			var y = event.clientY;
//			ball.x = x;
//			ball.y = y;
//			ball.draw();
//		}, true);
		canvas.addEventListener("mouseover", draw, true);
		function quitGame(){
			window.cancelAnimationFrame(raf);
			beginGame = false;
			result.innerHTML = "game over";
		}
		canvas.addEventListener("mouseout", function() {
			window.cancelAnimationFrame(raf);
			beginGame = true;
			window.setTimeout(quitGame,1000 * 6);
		}, true);
		var a = true;

		function click1() {
			window.cancelAnimationFrame(raf);
			a = false;
		};

		function click2() {
			raf = window.requestAnimationFrame(draw);
			a = true;
		};
//		canvas.addEventListener("click", function click() {
//			if(a) {
//				click1();
//			} else {
//				click2();
//			}
//		}, true);
		//		canvas.addEventListener("click",draw,true);
		//		canvas.addEventListener("click",function click2(){
		//			window.cancelAnimationFrame(raf);
		//		},true);
		//		ball.draw();
	</script>

</html>